import React, {
    PureComponent
} from 'react';

import {
    View,
    Text,
    StyleSheet
} from 'react-native';

import ItemRow from './components/itemRow';

import seeking_icon from './../../images/profile/seeking.png';

interface Props {
    data:any
}

class Seeking extends PureComponent<Props> {
    static defaultProps = {
        data:{}
    }

    private getList(list = []):Array<any> {
        return list.filter((item:any) =>!!item.id).
        map((item:any) => item.label);
    }

    get Data() {
        const {
            data
        } = this.props;
        return data;
    }

    get matchGender() {
        const {
            matchGender
        } = this.Data;
        return matchGender || [];
    }

    get matchOrientation() {
        const {
            matchOrientation
        } = this.Data;
        return matchOrientation||[];
    }

    get matchAge() {
        const {
            matchAge
        } = this.Data
        return matchAge || {};
    }

    get LookingFor() {
        const {
            min,
            max
        } = this.matchAge

        return [
            {
                name:`Age`,
                label:`${min || 18}-${max || 80}`
            },
            {
                name:`Gender`,
                label:this.getList(
                    this.matchGender
                ).join(`,`)
            },
            {
                name:`Orientation`,
                label:this.getList(
                    this.matchOrientation
                ).join(`,`)
            }
        ]
    }

    private renderItem = (
        item:any,i:number
    ) => {
        const {
            label
        } = item;
        return (
            <View key={i} style={styles.itemStyle}>
                <Text style={styles.nameStyle}>
                    {item.name}
                </Text>
                <Text style={styles.textStyle}>
                    {label || `No filled`}
                </Text>
            </View>
        )
    }

    render() {
        return (
            <ItemRow title="Seeking" icon={seeking_icon}>
                {this.LookingFor.map(this.renderItem)}
            </ItemRow>
        )
    }
}

export default Seeking;

const styles = StyleSheet.create({
    nameStyle:{
        fontSize:12,
        fontWeight:`700`,
        color:`#8A92AE`
    },
    textStyle:{
        fontSize:12,
        color:`#fff`
    },
    itemStyle:{
        paddingVertical:8,
        flexDirection:`row`,
        alignItems:`center`,
        justifyContent:`space-between`
    }
}) as any;